<template>
  <KView class="slide-cell">
    <KView class="slide-cell-content" :style="{left:left}" @touchstart="touchStart">
      <slot></slot>
    </KView>
    <KView class="slide-cell-btns" :style="{width:btnWidth}">
      <KView class="btn-item flex-central" v-for="btn in btns" :key="btn.id" :style="getBtnStyle(btn)" @click="btnClick(btn)">
        <span>{{btn.label}}</span>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    props: {
      btns: {
        type: Array,
        default: () => []
      },
      value: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      value() {
        if (this.inputShow !== null) {
          this.inputShow = null;
          return;
        }
        this.left = SystemUtil.formatPx(0);
      }
    },

    data() {
      let btns = this.btns;
      let btnWidth = 160 * btns.length;
      return {
        btnWidthNum: btnWidth,
        btnWidth: SystemUtil.formatPx(btnWidth),
        left: SystemUtil.formatPx(0),
        startX: null,
        moveCount: 0,
        inputShow: null
      };
    },

    methods: {
      getBtnStyle(btn) {
        let style = {};
        let color = btn.color;
        if (!SystemUtil.isEmpty(color)) {
          style.color = color;
        }

        let bgColor = btn.bgColor;
        if (!SystemUtil.isEmpty(bgColor)) {
          style.background = bgColor;
        }
        return style;
      },

      touchStart(event) {
        if (event.changedTouches.length !== 1) {
          return;
        }

        this.startX = event.changedTouches[0].clientX;
        this.moveCount = 0;
        document.addEventListener('touchmove', this.touchMove);
        document.addEventListener('touchend', this.touchEnd);
      },

      touchMove(event) {
        if (event.changedTouches.length !== 1) {
          return;
        }

        this.moveCount++;
        if (this.moveCount % 2 !== 0) {
          return;
        }

        let moveX = event.changedTouches[0].clientX;
        let disX = this.startX - moveX;
        disX = Math.floor(disX * 750 / this.width);
        if (disX <= 0) {
          disX = 0;
        } else {
          let btnWidth = this.btnWidthNum;
          if (disX > btnWidth) {
            disX = btnWidth;
          }
        }
        this.left = SystemUtil.formatPx(-disX);
      },

      touchEnd(event) {
        let flag = false;
        if (event.changedTouches.length === 1) {
          let moveX = event.changedTouches[0].clientX;
          let disX = this.startX - moveX;
          disX = Math.floor(disX * 750 / this.width);
          if (disX < 90) {
            this.left = SystemUtil.formatPx(0);
          } else {
            this.left = SystemUtil.formatPx(-this.btnWidthNum);
            flag = true;
          }
        }
        this.startX = null;
        this.moveCount = 0;
        document.removeEventListener('touchmove', this.touchMove);
        document.removeEventListener('touchend', this.touchEnd);
        this.showChange(flag);
      },

      btnClick(btn) {
        this.left = SystemUtil.formatPx(0);
        this.$emit('btn-click', btn);
        this.showChange(false);
      },

      showChange(isShow) {
        if (this.value === isShow) {
          return;
        }

        this.inputShow = isShow;
        this.$emit('input', isShow);
        if (isShow) {
          this.$emit('slide-open');
        } else {
          this.$emit('slide-close');
        }
      },

      restoreSlide() {
        this.left = SystemUtil.formatPx(0);
      }
    }
  };

</script>

<style lang="scss">
  .slide-cell {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .slide-cell-content {
      position: absolute;
      z-index: 5;
      top: 0;
      width: 100%;
      height: 100%;
      transition: left 0.1s ease-in-out;
      background: #ffffff;
    }

    .slide-cell-btns {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      display: flex;

      .btn-item {
        flex: 1;
      }
    }
  }

</style>
